<template>
  <div class="home">
    <header>购物清单</header>
    <ul>
      <li v-for="(item,index) in cartList" :key="index">
        <input type="checkbox" v-model="item.ischeck">
        <img src="../assets/img.png" alt="">
        <section>
          <p>{{item.title}}</p>
          <p style="color:red">￥{{item.price}}</p>
        </section>
        <div>
          <p @click="item.num++">+</p>
          <p>{{item.num}}</p>
          <p @click="item.num==1?1:item.num--">-</p>
        </div>
      </li>
    </ul>
    <div class="foot">
      <span @click="del">删除所选</span>
      <span style="margin-left: 30px">合计：￥{{allPrice}}</span>
      <span class="foot-rt">去结算（{{allNum}}）</span>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions,mapState,mapMutations } from 'vuex';
export default {
  name: 'Home',
  components: {

  },
  computed:{
    ...mapState(['cartList']),
    allPrice(){ // 计算选中的总价
      let price = 0;
      this.cartList.forEach(item => {
        if (item.ischeck){
          price+= item.num*item.price
        }
      })
      return price
    },
    allNum(){ // 计算购买的数量
      let num = 0;
      this.cartList.forEach(item => {
        if (item.ischeck){
          num+= item.num
        }
      })
      return num
    }
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapActions(['getList']),
    ...mapMutations(['del'])
  },
}
</script>
<style lang="scss" scoped>
   .home{
     height: 100%;
     background: #e9e9e9;
     header{
       height: 50px;
       line-height: 50px;
       text-align: center;
       background: #fff;
      //  position: fixed;
      //  top: 0;
      //  left: 0;
      //  width: 100%;
     }
    //  ul{
    //    margin-top: 50px;
    //  }
    ul{
      height: calc(100% - 100px); // calc 计算的意思 注意：减号 两边必须有空格
      overflow: auto;
    }
     li{
       display: flex;
       margin-top: 10px;
       background: #fff;
       align-items: center;
       padding: 0 10px;
     }
     .foot{
       height: 50px;
       display: flex;
       align-items: center;
       background: #fff;
       padding-left: 10px;
      //  justify-content: space-around;
     }
     .foot-rt{
       line-height: 50px;
       background: rgb(133, 49, 202);
       color: #fff;
       margin-left: auto;
     }
   }
</style>
